<template>
  <div >
    <el-drawer :with-header="false" :visible.sync="drawer" direction="rtl" :before-close="close" size="75%"
      :append-to-body="true" destroy-on-close :modal-append-to-body="false">
      <div type="primary" class="drawer-close-btn" @click="close" style="height: 184px;"><img class="drawer-back" src="@/assets/images/drawer-back.png" alt=""><span class="close-text">返回联系人列表</span>
      </div>
      <div class="drawer-con-wrap">
        <div class="drawer-header">
          <!-- <div class="header-name">联系人</div> -->
          <div class="custom-header">
            <div class="header-left">
              <div class="star-list">
              <!--   <i class="el-icon-star-off" @click="attentClick()" v-if="contactDetails.star!=1"></i>
                <i class="el-icon-star-on" v-else @click="attentClick()"></i> -->
                <el-tooltip v-if="true" :content="contactDetails.star !=1 ? '添加关注' : '取消关注'" effect="dark" placement="top">
                  <i v-if="contactDetails.star !=1" class="el-icon-star-off focus-icon" @click="attentClick()" />
                  <i v-else class="rp rp-focus-on focus-icon active" @click="attentClick()" />
                </el-tooltip>
              </div>
              <div class="item" effect="dark" :content="customInfo.customerName" placement="top">
                <span class="customer-name">{{ contactDetails.name }}</span>
              </div>
              <!-- <div class="arrow-list">
                <el-button><i class="el-icon-arrow-left"></i></el-button>
                <el-button><i class="el-icon-arrow-right"></i></el-button>
              </div> -->
            </div>

           

            <div class="header-right">
              <el-button class="deepColour" @click="btnEditInfo">编辑</el-button>
              <el-button class="headBtn">呼叫中心</el-button>
              <el-button class="headBtn">转移</el-button>
              <el-button class="headBtn" style="margin-right: 10px;">更改成交状态</el-button>
              <!-- <el-button class="headBtn"><i class="el-icon-more"></i></el-button> -->
              <el-dropdown  @command="downClick" style="height: 32px;">
                <!-- dropdown图 -->
                <img src="@/assets/images/drawer-more.png" style="height: 32px;width: 32px;">
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="1">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>

          <!-- 编辑标签 -->
          <!-- <div class="link mt8">
            <el-tooltip class="item" effect="dark" content="编辑标签" placement="top">
              <i class="el-icon-link pointer edit-link"></i>
            </el-tooltip>
          </div> -->
          <!-- btn-list -->
          <!-- <div class="mt8"> -->
            <!-- <el-button @click="btnAdd(1)">创建任务</el-button> -->
            <!-- <el-button class="createBtn" @click="btnAdd(1)">创建联系人</el-button> -->
            <!-- <el-button>创建商机</el-button> -->
            <!-- <el-button class="createBtn" @click="btnAdd(2)">创建合同</el-button> -->
            <!-- <el-button class="createBtn" @click="btnAdd(3)">创建回款</el-button> -->
            <!-- <el-button @click="btnAdd(5)">添加团队成员</el-button> -->
          <!-- </div> -->
          <div class="mt8 mt8-black-btn">
            <el-button @click="btnAdd(1)" class="btn-hei" style="width: 125px;"><i class="el-icon-s-custom btn-icon"></i>创建联系人</el-button>
            <el-button @click="btnAdd(2)" class="btn-hei"><i class="el-icon-document-add btn-icon"></i>创建合同</el-button>
            <el-button @click="btnAdd(3)" class="btn-hei"><i class="el-icon-refresh-left btn-icon"></i>创建回款</el-button>
          </div>

          <div class="custom-base mt8">
            <div class="custom-base-item">
              <div class="item-label">客户名称</div>
              <div class="item-value">{{ contactDetails.name }}</div>
            </div>
            <div class="custom-base-item">
              <div class="item-label">职务</div>
              <div class="item-value">{{ contactDetails.post }}</div>
            </div>
            <!-- <div class="custom-base-item">
                <div class="item-label">负责人</div>
                <div class="item-value mt8">{{customInfo.ownerUserName}}</div>
              </div> -->
            <div class="custom-base-item">
              <div class="item-label">创建时间
                <!-- <i class="rp rp-icon-fill-help rp-help-tips ml4"></i> -->
              </div>
              <div class="item-value mt8 ">{{ contactDetails.createTime }}</div>
            </div>
            <div class="custom-base-item">
              <div class="item-label">手机</div>
              <div class="item-value mt8 phone">{{ contactDetails.mobile }}</div>
            </div>
          </div>


          <!--  -->
          <div class="info-block-wrap">
            <div class="info-left-wrap">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="活动" name="activity">
                  <activityBlock />
                </el-tab-pane>
                <el-tab-pane label="详细资料" name="particular">
                  <!-- <BasicInformation></BasicInformation> -->
                  <!-- <EditBaseInfo></EditBaseInfo> -->
                  <EditBaseInfo :id="contactDetails.id" ref="EditBaseInfoContacts" crmType='contacts' :detail="contactDetailsCopy"></EditBaseInfo>
                </el-tab-pane>
                <el-tab-pane label="团队成员" name="crm">
                  <teamMember></teamMember>
                </el-tab-pane>
                <el-tab-pane label="附件" name="accessoryBlock">
                  <accessoryBlock />
                </el-tab-pane>
                <!-- <el-tab-pane label="联系人" name="contacts">
                  <contactsBlock></contactsBlock>
                </el-tab-pane> -->
                <!-- <el-tab-pane label="客户地址" name="address">
                      <customAddress></customAddress>
                    </el-tab-pane> -->
                <el-tab-pane label="操作记录" name="invice">
                  <RelativeHandle></RelativeHandle>
                </el-tab-pane>
                <!-- <el-tab-pane label="发票" name="invice">
                      <invoice></invoice>
                    </el-tab-pane> -->
              </el-tabs>
            </div>
            <!-- 客户摘要 -->
            <!-- <customSummary ref="customSummary"/> -->
          </div>
        </div>
      </div>
    </el-drawer>

    <addDialog ref="addDialog" :dialogTitle="dialogTitle" :addType="addType" :dialogType="dialogType" @refreshList="refreshList" :action="createAction"></addDialog>
  </div>
</template>
<script>
// import data from './data.js';
import activityBlock from '@/components/busComponents/activityBlock'
import contactsBlock from '@/components/busComponents/contactsBlock'
import customAddress from '@/components/busComponents/customAddress/index.vue'
import invoice from '@/components/busComponents/invoice/index.vue'
import customSummary from '@/components/busComponents/customSummary/index.vue'
import RelativeHandle from '@/components/busComponents/RelativeHandle' // 操作记录
import teamMember from '@/components/busComponents/teamMember/index.vue'
import accessoryBlock from '@/components/busComponents/accessoryBlock'
import BasicInformation from '@/components/BasicInformation/index.vue' // 相关操作
import EditBaseInfo from '@/components/BasicInformation/EditBaseInfo.vue' // 相关操作
import addDialog from '@/components/DialogCustom/addDialog.vue'
import dataadd from '@/components/DialogCustom/dataadd.js'

import { queryByIdContacts,starContacts } from "@/api/contacts/contacts";
export default {
  components: { activityBlock, contactsBlock, customAddress, invoice, customSummary, RelativeHandle, teamMember, accessoryBlock, BasicInformation, EditBaseInfo, addDialog },
  name: "contactDrawer",
  props: {
    // contactDetails: {
    //   type: Object,
    //   default: () => {
    //     return {}
    //   }
    // }
  },
  data() {
    return {
      drawer: false,
      customInfo: {},
      customSbstractFlg: true,
      activeName: 'activity',
      dialogTitle: '',
      listFrom: [],
      dialogType: 1,
      contactDetails:{},
      contactDetailsCopy:{},
      addType: this.$GlobalStatus.tableType.Contacts,
      rowData: {},
      createAction: {
        type: 'save',
        id: '',
        data: {}
      },
    }
  },
  watch: {
    // contactDetails: {
    //   handler (newValue, oldValue) {
    //     this.contactDetails = newValue
    //     console.log(this.contactDetails)
    //   },
    //   deep: true
    // }
  },
  mounted() {
    // this.$nextTick(()=>{
    // const fatherDom = document.querySelector("body");
    //   if(fatherDom.append){
    //     fatherDom.append(this.$el);
    //   }else{
    //     fatherDom.appendChild(this.$el);
    //   }
    // })
    
  },
  methods: {
    //下拉
    downClick (command) {
      this.$emit("drawerInfo", command, this.contactDetails.id);
    },
    getInfo () {
      queryByIdContacts(this.contactDetails.id).then(res => {
        this.contactDetailsCopy = res.data;
      }).catch(error => {

      });
    },
    show(val) {
      this.contactDetails = val
      // console.log(this.contactDetails)
      this.drawer = true;
      this.getInfo()
    },
    close() {
      this.drawer = false;
    },
    handleClick(tab, event) {
      if (tab.paneName == "particular") {
         this.$refs.EditBaseInfoContacts.refreshData();
      }
    },
    attentClick() {
      this.contactDetails.star?this.contactDetails.star=0:this.contactDetails.star=1
      starContacts(this.contactDetails.id).then(res => {
        this.$message({
          message: this.contactDetails.star ? '关注成功' : '取消关注成功',
          type: 'success'
        });
      }).catch(error => {

      });
    },
    btnAdd(index) {
      // console.log(dataadd)
      this.dialogType = index;
      if (index == 1) {
        this.dialogTitle = "创建联系人"
        this.addType = this.$GlobalStatus.tableType.Contacts
        this.listFrom = JSON.parse(JSON.stringify(dataadd.phone)).data
      }
      if (index == 2) {
        this.dialogTitle = "创建合同"
        this.addType = this.$GlobalStatus.tableType.Contract
        this.listFrom = JSON.parse(JSON.stringify(dataadd.hetong)).data
      }
      if (index == 3) {
        this.dialogTitle = "创建回款"
        // this.addType = this.$GlobalStatus.tableType.Contacts
        this.listFrom = JSON.parse(JSON.stringify(dataadd.huikuan)).data
      }
      this.$refs.addDialog.showFun();
    },
    btnEditInfo () {
      // console.log('987654321',this.detailData.version)
      this.addType = this.$GlobalStatus.tableType.Contacts;
      this.createAction.type = 'update';
      this.createAction.id = this.contactDetailsCopy.id;
      this.dialogTitle = "编辑联系人"
      this.$refs.addDialog.showFun(this.contactDetailsCopy.id,this.contactDetailsCopy.version,this.contactDetailsCopy.batchId);
     
    },
    refreshList(){
      this.$emit("refreshList");
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/assets/styles/drawer-back.scss";
::v-deep .el-drawer__body{
  background: #F5F6FA;
  box-shadow: -6px 0px 17px 0px rgba(38,44,71,0.15);
  border-radius: 4px 0px 0px 4px;
}
::v-deep .el-tabs__item {
  color: #5A607F;
}
.btn-hei {
      color: #344563;
      border: 1px solid #DBDDE2;
      border-radius: 4px;
      .btn-icon {
        margin-right: 9px;
      }
    }
.drawer-con-wrap {
  .mt8-black-btn {
    padding: 0 !important;
  }
  .mt8 {
    margin-top: 20px;
    .createBtn {
      color: #164ACD;
      border: 1px solid #DBDDE2;
    }
  }

  padding: 32px 32px 16px;

  .drawer-header {
    .header-name {
      font-size: 14px;
      color: #6b778c;
    }

    .custom-header {
      margin-top: 2px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .header-left {
        display: flex;
        align-items: center;

        .customer-name {
          font-size: 22px;
          font-weight: 700;
          color: #172b4d;
        }
        .arrow-list {
          margin-left: 24px;
        }

        .star-list {
          margin-right: 10px;

          .el-icon-star-off {
            font-size: 18px;
            font-weight: 700;
            color: #dfe1e6;
            cursor: pointer;
          }

          .el-icon-star-on {
            color: #fac23d;
            margin-left: -3px;
            font-size: 22px;
            font-weight: 700;
            cursor: pointer;
          }
        }
      }

      .header-right {

        .headBtn {
          color: #164ACD;
          border: 1px solid #DBDDE2;
        }

        .deepColour {
          background-color: #204EC4;
          color: #ffffff;
          border: 1px solid #204EC4;
        }
      }
    }

    .link {
      .edit-link {
        font-size: 16px;
        margin-left: 8px;
      }
    }

    .custom-base {
      padding: 16px 0;
      background: #FFFFFF;
      box-shadow: 0px 1px 3px 0px rgba(21,34,50,0.08);
      border-radius: 3px;
      display: flex;
      align-items: stretch;
      flex-direction: row;

      .custom-base-item {
        // flex: 0 0 20%;
        // text-align: center;
        min-width: 20%;
        padding: 0 25px;
        // border-right: 1px solid #D7DBEC;

        .item-label {
          font-size: 14px;
          font-weight: 500;
          color: #7E84A3;
        }
        .item-value {
          font-size: 14px;
          font-weight: 400;
          margin-top: 5px;
          color: #131523;
        }

        // .phone {
        //   color: #36b37e;
        // }
      }
      .custom-base-item:last-child{
        border-right: none;
      }
    }

    .info-block-wrap {
      display: flex;
      margin-top: 16px;
      align-items: stretch;
      flex-direction: row;
      background: #FFFFFF;
      box-shadow: 0px 1px 4px 0px rgba(21,34,50,0.08);
      border-radius: 4px;
      .info-left-wrap {
        flex: 1;
        padding:10px 25px 25px 25px;
        overflow: hidden;
        width: 100%;
      }
    }
  }
}</style>